<template>
  <div class="chat">
    <div class="top">
      <p class="iconfont icon-guanbi" @click="$router.go(-1)"></p>
      <p>聊天</p>
    </div>

    <div class="right" v-if="chat.length>=1">
      <div class="right_item" v-for="item in chat" :key="item.id">
        <div class="text">{{item.text}}</div>
        <div class="img">
          <img
            src="https://panqiu8-1309958500.cos.ap-guangzhou.myqcloud.com/images/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221029101636.jpg"
            alt=""
          />
        </div>
      </div>
    </div>

    <div class="bottom">
      <input type="text" placeholder="发送你的信息" v-model="chat_content" @keydown.enter="add" />
      <p @click="add">发送</p>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            chat: [],
            chat_content:"",
            chat_id:10,
        };
    },
    methods:{
        add(){
            this.chat.push({
                id:this.chat_id,
                text:this.chat_content
            })
            this.chat_id += 1;
            this.chat_content = "";
        }
    },
};
</script>

<style lang="scss" scoped>
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 15px;
  width: 345px;
  background-color: #ffa200;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  input {
    flex: 1;
    border: none;
    padding: 10px;
    border-radius: 20px;
    color: #ffa200;
  }
  p {
    margin-left: 20px;
    font-weight: 700;
  }
}
.top {
  padding: 15px;
  display: flex;
  align-items: center;
  background-color: #ffa200;
  color: #ffffff;
  p {
    &:nth-child(2) {
      flex: 1;
      text-align: center;
    }
  }
}
.right {
    width: 200px;
    position: fixed;
    right: 15px;
    top: 70px;
  .right_item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
    .text {
        padding: 6px 10px;
        background-color: #ffa200;
        color: #ffffff;
        border-radius: 15px;
    }
    .img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
        }
    }
  }
}
</style>
